<template>
	<div class='container'>
		<div class='signal' :class='{bad : signal == 0, strong : computeSignal > 3}'>
		  <div class='signal-item' :class='{active : item <= computeSignal}' v-for='item in list'></div>
		</div>
		<div class='signal-num'>{{signal}}</div>
	</div>

</template>

<script>
	export default {
		props : {
			signal : {
			  type: Number,
			  default : 0
			}
		},
		
		computed : {
			computeSignal () {
				let signal = this.signal
			  let grid = 0
			  if (signal >= 26) {
				grid = 5
			  } else if (signal >= 20) {
				grid = 4
			  } else if (signal >= 14) {
				grid = 3
			  } else if (signal >= 8) {
				grid = 2
			  } else if (signal >= 1) {
				grid = 1
			  } else {
				grid = 0
			  }
			  return grid
			}
		},
		
		data() {
			return {
				list : [1, 2, 3, 4, 5]
			}
		}
	}
</script>

<style scoped lang='less'>
	.container{
		display:inline-block;
	  position:relative;
	  padding-right:25px;
	}
	.signal-num{
	  position:absolute;
	  left:16px;
	  top:50%;
	  transform:translateY(-50%);
	  font-size:12px;
	  white-space:nowrap;
	}

	.signal{
	  position:relative;
	  right:0px;
	  top:0px;
	  height:15px;
	  width:14px;
	}

	.signal-item{
	  width:2px;
	  background:#999;
	  position:absolute;
	  bottom:0px;
	}

	.signal.strong .signal-item.active{
	  background:#66ee78;
	}
	.signal .signal-item.active{
	  background:#f3b665;
	}

	.signal-item:nth-of-type(5){
	  height:15px;
	  left:12px;
	}
	.signal-item:nth-of-type(4){
	  height:12px;
	  left:9px;
	}
	.signal-item:nth-of-type(3){
	  height:9px;
	  left:6px;
	}
	.signal-item:nth-of-type(2){
	  height:6px;
	  left:3px;
	}
	.signal-item:nth-of-type(1){
	  height:4px;
	  left:0px;
	}


	.error{
	  position:absolute;
	  width:8px;
	  height:8px;
	  bottom:0px;
	  left:6px;
	}
</style>
